<template>
  <div class="container">
    <!-- <h1>Excel 数据页面</h1> -->
    <p v-if="!decryptedData">暂无缓存数据，请先获取数据。</p>
    <div v-if="decryptedData && decryptedData.length">
      <transition name="fade-slide" mode="out-in">
        <div class="word-card" :key="currentIndex">
          <p><strong>释义：</strong> {{ decryptedData[currentIndex][2] }}</p>
          <input class="inputStyle" type="text" v-model="userInput" @input="validateInput" placeholder="" />
        </div>
      </transition>
      <div class="controls">
        <button @click="prevWord" :disabled="currentIndex === 0">上一个</button>
        <button @mousedown="showHint" @mouseup="hideHint" @mouseleave="hideHint">
          提示
        </button>
        <button @click="nextWord" :disabled="currentIndex === decryptedData.length - 1">下一个</button>
      </div>
      <p v-if="hint" class="hint-text">提示: {{ hint }}</p>
    </div>
  </div>
</template>
<!-- 12 32 32 -->
<script setup>

import { ref, onMounted, computed, watch } from 'vue';

const decryptedData = ref(null);  // 存储解密后的单词数据
const currentIndex = ref(0);      // 当前单词索引
const userInput = ref('');        // 用户输入的单词
const CACHE_KEY = 'excelDataCache';
const hint = ref("");

// 计算当前正确的单词
const correctWord = computed(() => {
  return decryptedData.value && decryptedData.value.length > currentIndex.value
    ? decryptedData.value[currentIndex.value][0]  // 假设单词在 decryptedData[x][0]
    : "";
});

// 监听用户输入，限制只能输入字母且长度不超过正确单词长度
watch(userInput, (newValue) => {
  if (!correctWord.value) return; // 处理 correctWord 为空的情况

  userInput.value = newValue.replace(/[^a-zA-Z]/g, "").slice(0, correctWord.value.length);

  if (userInput.value.length === correctWord.value.length) {
    if (userInput.value.toLowerCase() === correctWord.value.toLowerCase()) {
      console.log("✅ 拼写正确，跳转下一个单词！");
      nextWord();
    } else {
      console.log("❌ 拼写错误，清空输入框！");

      // 触发抖动动画
      const inputElement = document.querySelector(".inputStyle");
      if (inputElement) {
        inputElement.classList.add("shake");
        setTimeout(() => {
          inputElement.classList.remove("shake"); // 200ms 后移除动画
        }, 200);
      }

      userInput.value = "";
    }
  }
});



// **只从缓存读取数据**
const loadFromCache = () => {
  const cached = localStorage.getItem(CACHE_KEY);
  if (cached) {
    const parsedCache = JSON.parse(cached);
    try {
      decryptedData.value = JSON.parse(parsedCache.data); // 解析 JSON 数据
      console.log('从缓存中读取数据:', decryptedData.value);
    } catch (error) {
      console.error('数据解析错误:', error);
    }
  }
};

// 切换到上一个单词
const prevWord = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    userInput.value = ""; // 清空输入框
  }
};

// 切换到下一个单词
const nextWord = () => {
  if (currentIndex.value < decryptedData.value.length - 1) {
    currentIndex.value++;
    userInput.value = ""; // 清空输入框
  }
};



// 显示提示（长按时显示）
const showHint = () => {
  if (decryptedData.value && decryptedData.value[currentIndex.value]) {
    const correctWord = decryptedData.value[currentIndex.value][0];
    hint.value = correctWord; // 显示前半部分
  }
};

// 隐藏提示（松开时消失）
const hideHint = () => {
  hint.value = "";
};


// 组件挂载时读取缓存
onMounted(() => {
  loadFromCache();
});



import { inject } from "vue";

const theme = inject("theme");
const setTheme = (newTheme) => {
  theme.value = newTheme; // 更新全局主题
};
</script>

<style scoped lang="scss">
.hint-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  /* color: #ff5722; */
  font-weight: bold;
  text-align: center;
  /* background: rgba(0, 0, 0, 0.7); */
  /* 半透明背景 */
  padding: 10px 20px;
  border-radius: 10px;
  white-space: nowrap;
  /* 防止换行 */
  display: inline-block;
}

.inputStyle {
  margin-top: 5vh;
  background: transparent;
  /* 透明背景 */
  border: none;
  /* 去除边框 */
  outline: none;
  /* 去除聚焦时的蓝色边框 */
  box-shadow: none;
  /* 移除阴影 */
  caret-color: black;
  /* 光标颜色 */
  font-size: 50px;
  /* 调整字体大小 */
  border-bottom: 1px solid #2d5179;
  letter-spacing: 5px;
  /* 调整字母间距 */
  color: var(--btn-text);
  text-align: center;
  /* 让文字居中 */
  width: 80%;
  /* 适当调整宽度 */
  display: block;
  /* 让输入框成为块级元素 */
  margin-left: auto;
  /* 居中 */
  margin-right: auto;
  /* 居中 */
}


h1 {
  /* color: blue; */

}

.container {
  /* position: relative; */
  width: 100%;
  height: 100vh;
  color: var(--btn-text);
  background: linear-gradient(var(--bg-color-deg), var(--bg-color-change1), var(--bg-color-change2), var(--bg-color-change3));
  background-size: 400% 400%;
  animation: gradientAnimation 10s infinite alternate ease-in-out;
  transition: background 1s, color 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }

  }
}


@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

.shake {
  // border: 1px solid #f78787;
  // box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.2);
  animation: shake 0.2s ease-in-out;
  border-bottom: 1px solid red;
  color: red;
}

.word-card {
  /* border: 1px solid #ccc; */
  padding: 16px;
  border-radius: 8px;
  margin-top: 20px;
  /* background: #f9f9f9; */
  text-align: center;

  p {
    font-size: 30px;
  }
}

.controls {

  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;

}

button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background: #007bff;
  /* color: white; */
}

button:disabled {
  /* background: gray; */
  cursor: not-allowed;
}




.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>
